<template>
    <div>
                <!-- 面包屑区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">人在回路</el-breadcrumb-item>
        <el-breadcrumb-item>学习</el-breadcrumb-item>
        <el-breadcrumb-item>学习器管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <el-button @click="queryLearner" class="queryBtn" type="primary">查看学习器</el-button>
                <!-- form区域 -->
      <el-form label-position="right" label-width="150px"  :model="chooseDatasetForm" ref="chooseDatasetFormRef">
        <el-row>
          <el-col :span="10">
            <el-form-item prop="dataset_name" label="数据集">
              <el-input clearable  readonly v-model="chooseDatasetForm.dataset_name" style="width: 300px"
                        @click.native="datasetDialogVisible=true" placeholder="请选择数据集"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="须知">
              <el-input style="width:300px" disabled  placeholder="必须选择特征工程处理后的测试集"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form label-position="right" label-width="150px" :model="addLearnerForm" ref="addLearnerFormRef"  class="demo-ruleForm">
        <el-row>
          <el-col :span="10">
            <el-form-item label="学习器名" prop="learner_name">
              <el-input clearable  v-model="addLearnerForm.learner_name" placeholder="请填写学习器名" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="学习器类型" prop="learner_type">
              <el-select  v-model="addLearnerForm.learner_type" placeholder="学习器类型" style="width: 300px">
                <el-option v-for="(option, index) in learnerTypeOptions" :key="index" :label="option.name" :value="option.type"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 学习参数的表单 -->
      <el-form label-position="right" label-width="150px" :model="learnParamsForm" ref="learnParamsFormRef" >
        <el-row>
          <el-col :span="10">
            <el-form-item label="训练方法" prop="train_name">
              <el-select  v-model="learnParamsForm.train_name" placeholder="请选择方法" style="width: 300px">
                <el-option
                  v-for="item in options1" :key="item.value"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="选择标签" prop="label">
              <el-select  v-model="learnParamsForm.label" placeholder="选择标签" style="width: 300px">
                <el-option
                  v-for="(item,index) in columnsList" :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item  label="n_components" prop="n_estimators">
              <el-select v-model="learnParamsForm.n_estimators" placeholder="请选择n_components" style="width: 300px">
                <el-option
                  v-for="item in options3" :key="item.value"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-button class="submitBtn" type="primary" @click="submitAllForm">开始训练</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 提交所有表单  -->

    </el-card>
  <!--      选择数据集，弹出的窗口-->
    <el-dialog title="选择数据集" :visible.sync="datasetDialogVisible" @close="getColumns">
      <!-- <dataset :isDialog="true" @dataset-choose = chooseDataset></dataset> -->
      <dataset-hu-fea :isDialog="true" @dataset-choose = chooseDataset></dataset-hu-fea>
    </el-dialog>
    </div>
</template>

<script>
import DatasetHuFea from '../data/DatasetHuFea'
import featureApi from './../../api/feature'
import learnApi from './../../api/learn'
// 学习器类型
const learnerTypeOptions = [
  { type: 'Manual', name: '人工' },
  { type: 'Auto', name: '自动化' },
  { type: 'HML', name: '人在回路' }
]
export default {
  name: 'Learn',
  components: {
    DatasetHuFea
  },
  data () {
    return {
      // 选择数据集form
      chooseDatasetForm: {
        dataset_name: '',
        dataset_id: ''
      },
      datasetId: '',
      datasetDialogVisible: false,
      addLearnerForm: {
        learner_name: '',
        learner_type: '',
        learner_parameters: {
        },
        dataset_id: ''
      },
      // 用于学习器类型转换的
      learnerTypeOptions,
      columnsList: [],
      // 学习参数的表单
      learnParamsForm: {
        train_name: '',
        label: [],
        n_estimators: 1
      },
      options3: [
        { value: '1', name: 1 },
        { value: '2', name: 5 },
        { value: '3', name: 8 },
        { value: '4', name: 10 }
      ],
      options1: [
        { value: '1', name: 'OneHot' },
        { value: '2', name: 'RFC' },
        { value: '3', name: '方法1' },
        { value: '4', name: '方法1' }
      ],
      algorithm_nameOptions: [],
      algorithm_category: 'Learner_supervised'
    }
  },
  created () {

  },
  methods: {
    // 接受数据集组件传来的数据
    chooseDataset (currentRow) {
      this.chooseDatasetForm.dataset_name = currentRow.dataset_name
      this.chooseDatasetForm.dataset_id = currentRow.dataset_id
      this.datasetId = currentRow.dataset_id
      this.datasetDialogVisible = false
    },
    // 获取数据集列名
    getColumns () {
      if (this.datasetId !== '') {
        featureApi.getDatasetColumns(this.datasetId).then(response => {
          const resp = response.data
          this.columnsList = resp.data
        })
      }
      learnApi.getMethods(this.algorithm_category).then(response => {
        const resp = response.data.data
        this.algorithm_nameOptions.push(resp.algorithm_name)
        console.log(resp)
      })
    },
    // 查看学习器
    queryLearner () {
      this.$router.push('/learn/queryLearner')
    },
    submitAllForm () {
      this.addLearnerForm.dataset_id = this.datasetId
      this.addLearnerForm.learner_parameters = this.learnParamsForm
      learnApi.add(this.addLearnerForm).then(response => {
        console.log(response)
        const resp = response.data
        if (resp.meta.code === 204) {
          this.$message.success('添加学习器成功')
        } else {
          this.$message.error('添加学习器失败')
        }
      })
    }

  }
}
</script>

<style scoped>
.queryBtn{
  margin-bottom: 15px;
}
  /* .el-form {
    margin: 20px auto;
  } */
  .el-form-item{
    margin-bottom: 30px;
  }
  .submitBtn {
    margin-left: 200px;
  }
</style>
